<template>
  <div style="max-height: 500px;overflow: auto;">
      <div v-for="(dish,index) in list"  :key="index" class="for">
          <el-row style="margin-bottom: 20px">
              <el-col :span="6" style="text-align: right">
                  <el-image :src="dish.picture" fit="fit" class="image"/>
              </el-col>
              <el-col :span="10" style="position: relative;height: 164px">
                  <div style="margin-left: 30px">
                      <h1
                          style="text-align: left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                          class="title"
                          :title="dish.name">
                          {{dish.name | ellipsisTitle}}
                      </h1>
                      <div class="pdiv">
                          <el-tag
                              type="info"
                              color="#DCDFE6">
                              一份起购
                          </el-tag>
                          <p >口味:{{dish.taste}}</p>
                          <p style="font-size: 21px;font-weight: bold;line-height: 40px;color: #ff5c00;">
                              {{dish.price}}元/份
                              <i class="bi bi-fire" style="color: #FF8000;font-size: 15px"></i>
                          </p>
                      </div>
                  </div>
              </el-col>
              <el-col :span="8" style="text-align: right">
                  <el-input-number
                      size="small"
                      v-model="dish.quantity"
                      :min="0"
                      class="input"
                      @change="(currentValue, oldValue)=>changeValue(currentValue, oldValue,dish)">
                  </el-input-number>
              </el-col>
          </el-row>
          <el-divider></el-divider>
      </div>
  </div>

</template>

<script>
import storeSearch from "@/api/storeSearch";
import Vue from "vue";
export default {
    props:[
        'sid',
        'type'
        // 'listFa'
    ],
    data(){
        return{
            list:[],
            goodList:[]
        }
    },
    methods:{
        changeValue(currentValue, oldValue,dish){
            var index = this.goodList.findIndex(function (list){
                return dish.id === list.id
            });
            if (currentValue>oldValue){
                if (index>=0){
                    this.goodList[index] = dish
                }else{
                    this.goodList.push(dish)
                }
                this.$emit('goodCar',this.goodList)
            }else{
                if (dish.quantity === 0){
                    this.goodList.splice(index,1);
                }else {
                    this.goodList[index] = dish;
                }
                this.$emit('goodCar',this.goodList);
            }
        },
        listFa(val){
            this.goodList = val;
            console.log(val)
            if (val.length === 0){
                for (const obj of this.list) {
                    obj.quantity = 0;
                }
            }else{
                for (const item of this.goodList){
                    if(item.quantity === 0){
                        this.goodList.splice(this.goodList.indexOf(item),1);
                        console.log(this.goodList,"=============")
                        // this.goodList = this.listFa;
                        break
                    }
                }
            }

            this.$emit('goodCar',this.goodList);
        }
    },
    created() {
        var id = this.sid
        var type = this.type
        console.log(type)
        if (this.type === 0){
            console.log('type1')
            storeSearch.searchStoreDish(id).then((response=>{
                this.list = response.data.data;
            }))
        }else{
            storeSearch.findByType(id,type).then((response=>{
                this.list = response.data.data;
            }))
        }

    },
    beforeUpdate() {
        console.log(2222111333)

    },
    watch:{

    },
    filters:{
        ellipsisTitle(value) {
            if (!value) return "";
            if (value.length > 15) {
                // 截取长度
                return value.slice(0, 15) + "...";
            }
            return value;
        }
    }
}
</script>

<style scoped>
.image{
    width: 160px;
    height: 160px;
    border-radius: 4px;
}
.title{
    color: #606266
}
p{
    color: #606266;
    line-height: 30px;
}
.pdiv{
    position:absolute;
    bottom:0;
    line-height: 25px;
    font-size: 17px;
    color: #909399;
}
.el-divider--horizontal{
    width: 80%;
    margin: 24px auto;
}
.input{
    border: transparent;
    position: absolute;
    margin-right: 20px;
    right: 50px;
    bottom: 10px;
}
.input>>>.el-input-number__increase, .input>>>.el-input-number__decrease{
    border-radius: 30px !important;
    background-color: #ffc300 !important;
}
.input>>>.el-input__inner{
    border: 0px !important;
}
</style>